<template>
  <div class="dashboard-container" style='display: flex;flex-direction: row'>
<!--    <div class="dashboard-text">name: {{ username }}</div>
    <div>update element-plus to 1.2.+, add svg icon, icon-font is abandoned</div>
    <i class="el-icon-add-location">abandoned</i>
    <div>
      <el-icon>
        <Svg.Edit></Svg.Edit>
      </el-icon>
    </div>
    <div class="mt-2">this is var from vite.config.js define</div>
    <div>{{ showObj }},{{ showObjString }}</div>-->
    <div style='width: 50%'>
        <el-calendar v-model="value" />
    </div>
    <div style='width: 50%' v-if='show'>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template #default="props">
            <p>反馈内容: {{ props.row.message }}</p>
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="username" />
        <el-table-column label="反馈时间" prop="createTime" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import * as Svg from '@element-plus/icons-vue'
import { computed, ref ,reactive,getCurrentInstance,onBeforeMount,toRefs} from 'vue'
import { useStore } from 'vuex'
import {getopinion} from '@/api/table'
let { proxy } = getCurrentInstance();
let store = useStore()
const username = computed(() => {
  return store.state.user.username
})
const showObj = ref(GLOBAL_VAR)
// eslint-disable-next-line no-undef
const showObjString = ref(GLOBAL_STRING)

const value = ref(new Date())

const show = computed(() => {
  let role = store.state.user.roles[0]
  return role=='admin'?true:false
})


const state = reactive({
  tableData: null,
  listLoading: true
})

let { tableData,listLoading } = toRefs(state)

onBeforeMount(() => {
  fetchData()
})

const  fetchData = () =>{
  getopinion().then((response)=>{
    console.log(response.data.data)
    state.tableData = response.data.data;
  })
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    //margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
</style>
